<template>
  <el-row style="height: 100%;" v-if="analysisData.questions.length !== 0">
    <el-col :span="14" style="padding: 0 40px;">
      <div @click="analysisData.isShow = true" class="topbox">{{analysisData.number + 1}}/{{analysisData.questions.length}}</div>
      <div class="contentbox">
        <div class="title" :class="{mb: analysisData.questions[analysisData.number].type!='tian'}">
          <span style="font-weight: normal;">({{ optype(analysisData.questions[analysisData.number].type) }})</span>
          {{analysisData.questions[analysisData.number].title}}</div>
        <!-- 单选、判断 -->
        <div v-if="analysisData.questions[analysisData.number].type == 'dan' || analysisData.questions[analysisData.number].type == 'pan'">
          <div v-for="item in analysisData.questions[analysisData.number].options" :key="item.code">
            <div :class="{falseCss: item.code==analysisData.answers[analysisData.number] && analysisData.answers[analysisData.number] != analysisData.questions[analysisData.number].answer, trueCss: item.code==analysisData.questions[analysisData.number].answer && item.code==analysisData.answers[analysisData.number], option: true}">{{item.code}}. {{item.option}}</div>
          </div>
        </div>
        <!-- 多选 -->
        <div v-if="analysisData.questions[analysisData.number].type == 'duo'">
          <div v-for="(item, index) in analysisData.questions[analysisData.number].options" :key="item.code">
            <div :class="{falseCss: analysisData.record[index]==2, trueCss: analysisData.record[index]==1, noneCss: analysisData.record[index]==0, option: true}">{{item.code}}. {{item.option}}</div>
          </div>
        </div>
      </div>
      <div class="answerbox" :class="{spcss: analysisData.questions[analysisData.number].type != 'tian'}">
        <div class="trueanswer" >正确答案：<text>{{analysisData.questions[analysisData.number].answer}}</text></div>
        <div class="myanswer" v-show="analysisData.answers[analysisData.number] != analysisData.questions[analysisData.number].answer">我的答案：<text>{{analysisData.answers[analysisData.number]}}</text></div>
      </div>
      <div class="dolist">
        <div @click="analysisData.collectShow = true">收藏</div>|
        <div @click="navToComment">评论</div>
      </div>
      <div class="btnbox">
        <el-button @click="calc(-1, analysisData.questions[analysisData.number-1].type)" v-show="analysisData.number!=0">上一题</el-button>
        <el-button type="primary" @click="calc(1, analysisData.questions[analysisData.number+1].type)" v-show="analysisData.number!=analysisData.questions.length-1">下一题</el-button>
      </div>
    </el-col>
    <el-col :span="10" style="padding: 0 20px;">
      <el-button @click="router.go(-1)" style="width: 100%;" type="danger">返回上一页</el-button>
      <div class="analysisbox">
        <div style="margin-bottom: 1vh; font-weight: bold;">解析</div>
        <el-scrollbar height="100%">
          <text>{{analysisData.questions[analysisData.number].analysis}}</text>
        </el-scrollbar>
      </div>
    </el-col>
  </el-row>
  <!-- 收藏列表抽屉 -->
  <el-drawer v-model="analysisData.collectShow" title="收藏列表" direction="ltr">
      <el-scrollbar height="100%">
        <el-button type="primary" @click="addfolder" style="width: 100%;">新建</el-button>
        <div v-for="item in analysisData.collectlist" :key="item" class="scrollbar-demo-item" @click="addCollect(item)">
          <div class="item">
            <text>{{item.foldername}}</text>
          </div>
        </div>
      </el-scrollbar>
  </el-drawer>
  <!-- 评价列表抽屉 -->
  <el-drawer v-model="drawer" title="评价列表" style="display: flex; flex-direction: column;">
    <el-scrollbar style="height: 100%;">
      <el-input
        v-model="areatext"
        type="textarea"
        maxlength="100"
        placeholder="请输入评论"
        show-word-limit
      />
      <el-button type="primary" @click="addComment" style="width: 100%; margin: 10px 0;">新添评论</el-button>
      <div v-for="item in commentData.commentlist" :key="item.id" style="margin: 10px 0;">
        <div style="display: flex; background-color: var(--el-color-primary-light-9); padding: 10px; border-radius: 10px;">
          <el-image :src="item.imgurl ? item.imgurl : require('@/assets/logo.png')" :fit="fit" style="width: 50px; height: 50px; border-radius: 50%; flex: 1;" />
          <div style="flex: 6; padding-left: 10px;">
            <div style="font-weight: bold; display: flex; justify-content: space-between; align-items: center;">
              <div>{{item.name}}</div>
              <el-button @click="reportComment(item.id)" type="danger">举报评论</el-button>
            </div>
            <div style="margin-top: 1vw;">{{item.comment}}</div>
          </div>
        </div>
      </div>
    </el-scrollbar>
  </el-drawer>
  <!-- 题量对话框 -->
  <el-dialog v-model="analysisData.isShow" @click="analysisData.isShow = false">
    <el-scrollbar height="350px">
      <div v-for="(item, index) in analysisData.questions" :key="item.code" :class="{numberBtn: true, trueCss: analysisData.answers[index] == analysisData.questions[index].answer, falseCss: analysisData.answers[index] != analysisData.questions[index].answer}" @click="numberCalc(index)">{{index+1}}</div>
    </el-scrollbar>
  </el-dialog>
  <!-- 选项列表页面 -->
  <!-- <div class="cover" v-if="isShow" @click="analysisData.isShow = false">
    <scroll-div scroll-y class="popbox">
      <text v-for="(item, index) in analysisData.questions" :key="item.code" :class="{numberBtn: true, trueCss: analysisData.answers[index] == analysisData.questions[index].answer, falseCss: analysisData.answers[index] != analysisData.questions[index].answer}" @click="numberCalc(index)">{{index+1}}</text>
    </scroll-div>
  </div> -->
</template>

<script setup>
  // addcollectquestion
  import { getcollectlist, addcollectquestion, getcommentlist, addcomment, getgrade, getquestions, getwronglist, setcomment } from '../../api/question.js'
  import { ref, onBeforeMount, computed } from 'vue'

  import { useRoute, useRouter } from 'vue-router'
  import { ElMessage, ElMessageBox } from 'element-plus'

  // 提交答案
  import { useStore } from '../../store'
  const store = useStore()
  const route = useRoute()
  const router = useRouter()
  // console.log('99999999', route.query.query)

  const analysisData = ref({
    isShow: false,
    record: [],
    answers: [],
    number: 0,
    questions: [],
    collectShow: false,
    collectlist: [],
    areaShow: false,
    areaTxt: ''
  })
  const optype = computed(() => (type) => {
    switch (type) {
      case 'tian': return '填空'
      case 'duo': return '多选'
      case 'pan': return '判断'
      case 'dan': return '单选'
    }
  })
    onBeforeMount(() => {
      if (route.query.wrongsubject) {
        getwronglist({
          username: localStorage.getItem('token')
        }).then(r => {
          console.log(r)
          let qArr = []
          let aArr = []
          for (let i = 0; i < r.wronglist.length; i++) {
            if (route.query.wrongsubject === r.wronglist[i].subject) {
              qArr = r.wronglist[i].questionIds
              aArr = r.wronglist[i].answers
              break
            }
          }
          getquestions({
            questionIds: qArr
          }).then(res => {
            console.log(res)
            analysisData.value.questions = res.questions
            analysisData.value.answers = aArr
            calc(route.query.n - 0, res.questions[route.query.n - 0].type)
          })
        })
      } else {
        getgrade({
          time: route.query.time,
          type: route.query.type
        }).then(res => {
          if (route.query.isAll === 'true') {
            analysisData.value.questions = res.questions
            analysisData.value.answers = res.answers
            calc(route.query.n - 0, res.questions[route.query.n - 0].type)
            // console.log(analysisData.value.questions[route.query.n - 0])
          } else {
            // console.log("bbb")
            // console.log(store.errorQuestions)
            const qArr = []
            const aArr = []
            for (let i = 0; i < res.errorIndexs.length; i++) {
              qArr.push(res.questions[res.errorIndexs[i]])
              aArr.push(res.answers[res.errorIndexs[i]])
            }
            analysisData.value.answers = aArr
            analysisData.value.questions = qArr
            calc(0, qArr[0].type)
          }
        })
      }
      // 获取收藏列表
      if (store.collectlist === null) {
        // 获取收藏列表
        getcollectlist({
          username: localStorage.getItem('token')
        }).then(res => {
          // console.log(res.collectlist)
          store.collectlist = res.collectlist
          analysisData.value.collectlist = res.collectlist
          // console.log(res.collectlist)
        })
      } else {
        analysisData.value.collectlist = store.collectlist
      }
    })
      // 跳转题目
      const calc = (n, type) => {
        // console.log(analysisData.value.number, n, type)
        if (type === 'duo') {
          duoCalc(n)
        } else {
          analysisData.value.number = analysisData.value.number + n
        }
      }
      // 跳转多选题时的处理
      const duoCalc = (n) => {
        // console.log(analysisData.value.answers[analysisData.value.number])
        // console.log(analysisData.value.questions[analysisData.value.number])
        analysisData.value.number = analysisData.value.number + n
        const arr = []
        let option = ''
        for (let j = 0; j < analysisData.value.questions[analysisData.value.number].options.length; j++) {
          option = analysisData.value.questions[analysisData.value.number].options[j].code
          if (analysisData.value.answers[analysisData.value.number].indexOf(option) === -1 && analysisData.value.questions[analysisData.value.number].answer.indexOf(option) !== -1) {
            // 未选
            arr.push(0)
          } else if (analysisData.value.answers[analysisData.value.number].indexOf(option) !== -1 && analysisData.value.questions[analysisData.value.number].answer.indexOf(option) !== -1) {
            // 选对
            arr.push(1)
          } else if (analysisData.value.answers[analysisData.value.number].indexOf(option) !== -1 && analysisData.value.questions[analysisData.value.number].answer.indexOf(option) === -1) {
            // 错选
            arr.push(2)
          }
        }
        analysisData.value.record = arr
        // console.log(arr)
      }
      // 计算跳转到第几题
      const numberCalc = (index) => {
        const length = index - analysisData.value.number
        calc(length, analysisData.value.questions[index].type)
      }

      // 收藏部分
      // 添加收藏
      const addCollect = (item) => {
        // console.log(item)
        // 判断该收藏夹是否存在该问题
        let flag = false
        for (let i = 0; i < item.questionIds.length; i++) {
          if (item.questionIds[i] === analysisData.value.questions[analysisData.value.number].id) {
            flag = true
            break
          }
        }
        if (flag) {
          ElMessage.error('已存在该收藏夹')
        } else {
          addcollectquestion({
            username: localStorage.getItem('token'),
            foldername: item.foldername,
            questionId: analysisData.value.questions[analysisData.value.number].id
          }).then(res => {
            item.questionIds.push(analysisData.value.questions[analysisData.value.number].id)
            store.setcollectitem(item)
            ElMessage.success('收藏成功')
          })
        }
      }
      // 新建文件夹
      const addfolder = () => {
        ElMessageBox.prompt('请输入新收藏夹', '新建收藏夹', {
          confirmButtonText: '确定',
          cancelButtonText: '取消'
        })
        .then(({ value }) => {
          if (value.split(' ').join('') === '') {
            ElMessage.error('输入内容不能为空')
            return
          }
          addcollectquestion({
            username: localStorage.getItem('token'),
            foldername: value,
            questionId: analysisData.value.questions[analysisData.value.number].id
          }).then(r => {
            const item = {
              username: localStorage.getItem('token'),
              foldername: value,
              questionIds: [analysisData.value.questions[analysisData.value.number].id]
            }
            store.setcollectitem(item)
            analysisData.value.collectlist.push(item)
            // console.log(that.collectlist)
            ElMessage.success('添加成功')
          })
        })
        .catch(() => {})
      }

  // 评价部分
  const drawer = ref(false)
  const areatext = ref('')
  const commentData = ref({
    commentlist: [],
    areatext: ''
  })
  // 打开评论抽屉
  const navToComment = () => {
    drawer.value = true
    areatext.value = ''
    getcommentlist({
      questionId: analysisData.value.questions[analysisData.value.number].id
    }).then(res => {
      console.log(res.commentlist)
      commentData.value.commentlist = res.commentlist
    })
  }
  // 添加评论
  const addComment = () => {
    if (areatext.value.split(' ').join('') === '') {
      ElMessage.error('输入内容不能为空')
      return
    }
    const item = {
      questionId: analysisData.value.questions[analysisData.value.number].id,
      username: localStorage.getItem('token'),
      comment: areatext.value
    }
    addcomment(item).then(r => {
      getcommentlist({
        questionId: analysisData.value.questions[analysisData.value.number].id
      }).then(res => {
        // console.log(res.commentlist)
        commentData.value.commentlist = res.commentlist
        areatext.value = ''
        ElMessage.success('添加成功')
      })
    })
  }
  // 举报评论
  const reportComment = (id) => {
    ElMessageBox.confirm('是否举报该评论', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消'
        })
        .then(() => {
          setcomment({
            id,
            isreport: 1
          }).then(res => {
            ElMessage.success('举报成功')
          })
        })
        .catch(() => {})
      }
</script>

<style lang="less" scoped>
  .numberBtn {
    display: inline-block;
    border: 1px solid #000;
    border-radius: 50%;
    line-height: 50px;
    width: 50px;
    height: 50px;
    margin: 10px;
    text-align: center;
  }
  .trueCss {
    background-color: rgba(0, 128, 0, .3);
  }
  .falseCss {
    background-color: rgba(128, 0, 0, .3);
  }
  .noneCss {
    background-color: rgba(255, 255, 0, .3);
  }
  .topbox {
    background-color: #fff;
    height: 5vh;
    text-align: center;
    line-height: 5vh;
    margin: 2vh auto;
    font-size: 2.8vh;
    border: 1px solid rgba(0,0,0,.2);
    border-radius: 10px;
  }
  .contentbox {
    box-sizing: border-box;
    background-color: #fff;
    padding: 1vh 3vw;
    margin: 2vh auto;
    font-size: 2.8vh;
    border: 1px solid rgba(0,0,0,.2);
    border-radius: 10px;

    .title {
      font-weight: bold;
    }

    .mb {
      margin-bottom: 2vh;
    }

    .option {
      padding-left: 5vw;
      line-height: 5vh;
      margin-bottom: 1vh;
    }
  }
  .answerbox {
    box-sizing: border-box;
    background-color: #fff;
    padding: 1vh 5vw;
    margin: 2vh auto;
    font-size: 2.5vh;
    border: 1px solid rgba(0,0,0,.2);
    border-radius: 10px;

    .trueanswer {
      margin-bottom: 1vh;
      text {
        color: rgba(0, 128, 0, .5);
      }
    }

    .myanswer {
      text {
        color: rgba(128, 0, 0, .5);
      }
    }
  }
  .spcss {
    display: flex;
    justify-content: space-around;
    align-items: center;

    .trueanswer {
      margin-bottom: 0;
    }
  }
  .analysisbox {
    box-sizing: border-box;
    background-color: #fff;
    margin: 2vh auto;
    font-size: 2.5vh;
    padding: 1vh 3vw;
    border: 1px solid rgba(0,0,0,.2);
    border-radius: 10px;
    height: 80%;
  }
  .dolist {
    display: flex;
    background-color: #fff;
    justify-content: space-evenly;
    align-items: center;
    height: 6.5vh;
    margin: 2vh auto;
    border: 1px solid rgba(0,0,0,.2);
    border-radius: 10px;

    div {
      width: 100%;
      text-align: center;
    }
  }
  .btnbox {
    display: flex;
    // margin: 2vh auto;
    justify-content: space-around;
    width: 100%;

    button {
      width: 40%;
    }
  }
  .scrollbar-demo-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 10px;
    padding: 10px;
    text-align: center;
    border-radius: 4px;
    background: var(--el-color-primary-light-9);
    color: var(--el-color-primary);

    .item {
      display: flex;
      justify-content: space-around;
      width: 100%;
      font-size: 15px;
      align-items: center;
    }
  }
</style>
